<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火星情报局 - 管理员登录</title>
    <link rel="stylesheet" href="../admin-styles.css">
</head>
<body>
    <div class="login-container">
        <div class="login-box">
            <h1>火星情报局</h1>
            <h2>管理员登录</h2>
            <form id="loginForm">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" autocomplete="username" required>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" autocomplete="current-password" required>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn-primary">登录</button>
                </div>
            </form>
            <div class="manual-actions" style="margin-top: 20px; text-align: center; display: none;" id="manualActions">
                <p style="color: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); margin-bottom: 15px;">如果没有自动跳转，请点击下面的按钮</p>
                <button onclick="goDashboard()" class="btn-secondary" style="width: auto; margin-top: 10px;">手动前往管理页面</button>
            </div>
        </div>
    </div>

    <script>
        // 辅助函数：检查localStorage和sessionStorage可用性
        function checkStorageAvailability() {
            const status = {
                localStorage: false,
                sessionStorage: false,
                cookies: false
            };
            
            // 检查localStorage
            try {
                localStorage.setItem('test', 'test');
                localStorage.removeItem('test');
                status.localStorage = true;
            } catch (e) {
                console.error('localStorage不可用:', e);
            }
            
            // 检查sessionStorage
            try {
                sessionStorage.setItem('test', 'test');
                sessionStorage.removeItem('test');
                status.sessionStorage = true;
            } catch (e) {
                console.error('sessionStorage不可用:', e);
            }
            
            // 检查cookies
            try {
                document.cookie = "testcookie=1; path=/; max-age=3600";
                status.cookies = document.cookie.indexOf("testcookie=") !== -1;
            } catch (e) {
                console.error('cookies不可用:', e);
            }
            
            return status;
        }

        // 辅助函数：保存token到可用的存储中
        function saveToken(token) {
            const status = checkStorageAvailability();
            const storageStatus = document.getElementById('storageStatus');
            let saved = false;
            
            // 尝试localStorage
            if (status.localStorage) {
                try {
                    localStorage.setItem('adminToken', token);
                    console.log('Token已保存到localStorage');
                    saved = true;
                } catch (e) {
                    console.error('保存到localStorage失败:', e);
                }
            }
            
            // 尝试sessionStorage (作为备份)
            if (status.sessionStorage) {
                try {
                    sessionStorage.setItem('adminToken', token);
                    console.log('Token已保存到sessionStorage');
                    saved = true;
                } catch (e) {
                    console.error('保存到sessionStorage失败:', e);
                }
            }
            
            // 尝试cookies (作为最后备选)
            if (status.cookies) {
                try {
                    document.cookie = `adminToken=${token}; path=/; max-age=86400`;
                    console.log('Token已保存到cookies');
                    saved = true;
                } catch (e) {
                    console.error('保存到cookies失败:', e);
                }
            }
            
            // 显示存储状态
            storageStatus.textContent = '存储状态: ' + 
                (status.localStorage ? '本地存储✓ ' : '本地存储✗ ') + 
                (status.sessionStorage ? '会话存储✓ ' : '会话存储✗ ') + 
                (status.cookies ? 'Cookies✓' : 'Cookies✗');
            
            return saved;
        }

        // 辅助函数：检查是否已登录
        function checkLoggedIn() {
            // 按优先级检查各种存储
            if (localStorage && localStorage.getItem('adminToken')) {
                return localStorage.getItem('adminToken');
            }
            
            if (sessionStorage && sessionStorage.getItem('adminToken')) {
                return sessionStorage.getItem('adminToken');
            }
            
            // 检查cookie
            const match = document.cookie.match(/adminToken=([^;]+)/);
            if (match) {
                return match[1];
            }
            
            return null;
        }

        // 辅助函数：前往仪表盘
        function goDashboard() {
            try {
                window.location.href = '/admin/dashboard.html';
            } catch (e) {
                console.error('导航错误:', e);
                alert('导航到仪表盘失败，请手动访问: /admin/dashboard.html');
            }
        }

        // 当页面加载完成时，检查是否已登录
        document.addEventListener('DOMContentLoaded', function() {
            // 检查存储可用性（不再显示状态）
            const status = checkStorageAvailability();
            
            // 如果已经有token，直接跳转
            const token = checkLoggedIn();
            if (token) {
                console.log('检测到已有token，直接跳转到管理页面');
                setTimeout(goDashboard, 1000);
            }
        });

        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 禁用提交按钮，防止重复提交
            const submitBtn = this.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.textContent = '登录中...';
            
            // 清除之前的消息（不再需要）
            document.getElementById('manualActions').style.display = 'none';
            
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            console.log('开始登录请求...');
            
            // 调用管理员登录API
            fetch('/api/auth/admin/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password }),
                credentials: 'same-origin' // 添加此选项以允许发送和接收cookie
            })
            .then(response => {
                console.log('登录响应状态:', response.status);
                return response.json().catch(() => {
                    // 处理无法解析为JSON的响应
                    throw new Error('无法解析服务器响应为JSON格式');
                });
            })
            .then(data => {
                console.log('登录响应数据:', data);
                
                // 检查响应结构 - 兼容不同的返回格式
                let token = null;
                if (data.token) {
                    token = data.token;
                } else if (data.data && data.data.token) {
                    token = data.data.token;
                }
                
                if (token) {
                    console.log('登录成功，获取到token: ', token.substring(0, 15) + '...');
                    
                    // 保存token前先清除任何可能存在的旧token
                    if (localStorage) localStorage.removeItem('adminToken');
                    if (sessionStorage) sessionStorage.removeItem('adminToken');
                    document.cookie = 'adminToken=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT'; // 删除cookie
                    
                    // 保存token到存储
                    const saved = saveToken(token);
                    
                    if (!saved) {
                        throw new Error('无法保存登录状态，请检查浏览器设置');
                    }
                    
                    // 测试token是否真的被保存了
                    const retrievedToken = checkLoggedIn();
                    console.log('保存后重新获取的token:', retrievedToken ? '获取成功' : '获取失败');
                    
                    if (!retrievedToken) {
                        console.error('登录成功但无法保存状态');
                        submitBtn.disabled = false;
                        submitBtn.textContent = '登录';
                        return;
                    }
                    
                    // 显示手动跳转选项
                    document.getElementById('manualActions').style.display = 'block';
                    
                    // 使用多种方式尝试跳转
                    console.log('准备跳转到dashboard.html，使用多种导航方式尝试');
                    
                    // 创建一个测试请求确认token被正确接收
                    fetch('/api/airoles', {
                        method: 'GET',
                        headers: {
                            'Authorization': `Bearer ${token}`
                        },
                        credentials: 'same-origin'
                    })
                    .then(resp => {
                        console.log('Token验证响应状态:', resp.status);
                        if (resp.ok) {
                            console.log('Token验证成功');
                        } else {
                            console.warn('Token验证失败，状态码:', resp.status);
                        }
                    })
                    .catch(err => {
                        console.error('Token验证请求失败:', err);
                    });
                    
                    // 方法1: 标准导航
                    window.location.href = '/admin/dashboard.html';
                    
                    // 方法2: 延迟导航（备用，通常方法1会使此方法无效）
                    setTimeout(function() {
                        console.log('尝试延迟跳转...');
                        try {
                            window.location.replace('/admin/dashboard.html');
                        } catch (e) {
                            console.error('延迟跳转错误:', e);
                        }
                    }, 1500);
                    
                    // 方法3: 打开新窗口（作为最后手段，确保用户能进入管理页面）
                    setTimeout(function() {
                        // 如果页面仍在当前URL，3秒后尝试其他方法
                        if (window.location.href.includes('login.html')) {
                            console.log('常规跳转可能失败，尝试其他方式...');
                            // 在新窗口打开（用户可能需要允许弹窗）
                            const dashboardWindow = window.open('/admin/dashboard.html', '_blank');
                            if (!dashboardWindow) {
                                alert('无法自动跳转，请点击"手动前往管理页面"按钮或直接访问 /admin/dashboard.html');
                            }
                        }
                    }, 3000);
                } else {
                    // 登录失败，重新启用提交按钮
                    console.error('登录失败:', data.message || '用户名或密码不正确');
                    submitBtn.disabled = false;
                    submitBtn.textContent = '登录';
                }
            })
            .catch(error => {
                console.error('登录错误:', error);
                // 重新启用提交按钮
                submitBtn.disabled = false;
                submitBtn.textContent = '登录';
            });
        });
    </script>
    <style>
        .btn-secondary {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: white;
            padding: 10px 20px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 
                0 4px 15px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            outline: none;
        }
        .btn-secondary:hover {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
            transform: translateY(-2px);
            box-shadow: 
                0 6px 20px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }
    </style>
</body>
</html> 